import React from "react";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import "../style/style.less";
import ThePagination from "../../../components/ThePagination";
import { apiGetGoodsUpdateLog } from "@/request/system/goodsLog";
import TheQueryForm from '../../../components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import store from "@/store/store"
import { getDateTime3 } from '@/utils/getDate'
import _ from 'lodash'

let options = []
class List extends React.Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef()

    this.state = {
      down_loading: false,

      columns: [
        {
          title: "商品ID",
          dataIndex: "goodsId",
          key: "goodsId",
        },
        {
          title: "商品名称",
          dataIndex: "goodsName",
          key: "goodsName",
          render: (text, record) => {
            return <div style={{ margin:"0 auto", width: 400, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{record.goodsName}</div>
          }
        },
        {
          title: "类型",
          dataIndex: "opnType",
          key: "opnType",
          render: (text, render) => {
            let label = ''
            switch (render.opnType) {
              case 1:
                label = "新增"
                break;
              case 2:
                label = "修改"
                break;
              default:
                label = "字段值错误"
            }
            return label
          }
        },
        {
          title: "商品类型",
          dataIndex: "goodsTypeName",
          key: "goodsTypeName",
        },
        {
          title: "修改人",
          dataIndex: "updateUserName",
          key: "updateUserName",
          render: (text, record) => {
            return record.updateUserName ? record.updateUserName : "/"
          }
        },
        {
          title: "修改时间",
          dataIndex: "createTime",
          key: "createTime",
          render: (text, record) => {
            return record.createTime ? record.createTime : "/"
          }
        },

        {
          title: "操作",
          fixed: "right",
          width: 100,
          render: (text, render) => {
            return (
              <div>
                <TheButton onClick={() => this.goDetail(render.id)}>商品详情</TheButton>
              </div>
            );
          },
        },
      ],
      dataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      searchValue: {},
      newColumns: [],
      form_show: true,
      searchOption: [
        { field: 'goodsId', label: '商品ID', placeholder: '商品ID', required: false, rules: [], type: 'Input', defaultValue: '' },
        { field: 'goodsName', label: '商品名称', placeholder: '商品名称', required: false, rules: [], type: 'Input', defaultValue: '' },
        {
          field: 'goodsType', label: '商品类型', placeholder: '商品类型', required: false, rules: [], type: 'Select', options: [
            { value: '1', label: '中央商品库商品' },
            { value: '2', label: '门店商品' },
          ], defaultValue: ''
        },
        { field: 'updateUserName', label: '修改人', placeholder: '修改人', required: false, rules: [], type: 'Input', defaultValue: '' },
      ],
      queryForm: {},
    };
  }
  async componentDidMount() {
    this.onColumnsFilter(this.state.columns)
    let searchParams = store.getState().searchValue
    let { pageNo, pageSize, queryForm, pathName } = searchParams
    if (searchParams && pageNo && pathName == 'mallChangeLog') {
      this.setState({
        queryForm,
        pageData: {
          pageNo: pageNo, pageSize: pageSize
        }
      }, () => {
        this.queryFormRef.onSetDefault({
          ...queryForm
        })
        this.getData()
      })
    } else {
      this.getData()
    }
  }
  getData = async (values) => {
    let { pageNo, pageSize } = this.state.pageData
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      let { time, ...form } = { ...this.state.queryForm }
      const params = {
        pageNo, pageSize, queryForm: { ...form, time }
      }
      store.dispatch({
        type: 'SaveSearchValues',
        data: {
          pathName: 'mallChangeLog',
          ...params
        }
      })
      let res = await apiGetGoodsUpdateLog({
        pageNo, pageSize, ...form,
      })
      if (res.code === 0 && res.data) {
        this.setState({ dataSource: res.data, pageData: { pageNo: res.pageNo, pageSize: res.pageSize }, total: res.totalCount })
      }
    })
  }

  getValue = (value) => {
    this.setState({ searchValue: value, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }
  goDetail = (goodsId) => {
    this.props.history.push(`/settings/GoodsLog/detail/${goodsId}`);
  };
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  };
  onReset() {
    this.setState({
      queryForm: {}
    }, () => {
      this.getData()
    })
  }
  onColumnsFilter(value) {
    this.setState({
      newColumns: value
    })
  }
  onFormSearch(values){
    this.setState({
      pageData:{pageNo:1,pageSize:10}
    },()=>{
      this.getData(values)
    })
  }
  render() {
    const {
      columns,
      dataSource,
      pageData: { pageNo, pageSize },
      total, down_loading,
      form_show, searchOption, newColumns
    } = this.state;
    return (
      <div className={"p-layout-box commodity-content"}>
        <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
          onReset={() => this.onReset()}
          onGetValues={(values) => this.onFormSearch(values)} >
        </TheQueryForm>
        <TheTableExtend
          columns={columns}
          onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
          onTableRefresh={() => this.getData()}
          onColumnsFilter={(value) => this.onColumnsFilter(value)}
        >
        </TheTableExtend>
        <div className="p-layout-content-pagination">
          <TheTable
            scroll={{ x: "max-content", y: '63vh' }}
            columns={newColumns}
            dataSource={dataSource}
          />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
      </div>
    );
  }
}

export default List;
